<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>v-for</title>
  <script src="../../lib/vue.js"></script>
</head>

<body>
  <div id="app">
    <br />
    索引 :: 值(v-for 遍历普通数组)
    <div v-for="(item, i) in list" :key="item">{{ i }} :: {{ item }}</div>
    <br />
    索引 :: id :: 值(v-for 遍历对象数组)
    <div v-for="(o, i) in os" :key="o.id + 1000">
      <!-- 两处 v-for 的 key 不可相同 否则 console 会报error级警告 -->
      <!-- Duplicate keys detected: '*'. This may cause an update error -->
      {{ i }} :: {{ o.id }} :: {{ o.name }}
    </div>
    <br />
    键 : 值 （v-for 遍历对象键值对）
    <div v-for="(val, key) in user" :key="key">{{ key }} : {{ val }}</div>
    <br />
    索引 : 键 : 值 （v-for 遍历对象键值对）
    <div v-for="(val, key, i) in user" :key="key + i">
      {{ i }} —— {{ key }} : {{ val }}
    </div>
    <br />
    v-for迭代数字，特点: 是[1,n] 而不是平时的[0,n)
    <div v-for="count in 10">这是第 {{ count }} 次循环</div>
  </div>
</body>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      list: [1, 2, 3, 4, 5, 6],
      os: [
        { id: 1, name: "zs1" },
        { id: 2, name: "zs2" },
        { id: 3, name: "zs3" },
        { id: 4, name: "zs4" },
        { id: 5, name: "zs5" },
        { id: 6, name: "zs6" },
      ],
      user: {
        id: 1,
        name: "Tony",
        gender: "男",
      },
    },
  });
</script>

</html>